<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>{{ title }}</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="170px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择所属等级">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月日">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="籍贯" prop="native_place">
          <el-input v-model="form.native_place" />
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="form.nation" />
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-select v-model="form.political_outlook" placeholder="请选择所属等级">
            <el-option label="群众" value="群众" />
            <el-option label="共青团员" value="共青团员" />
            <el-option label="中共党员" value="中共党员" />
          </el-select>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="form.education" placeholder="请选择所属等级">
            <el-option label="小学" value="小学" />
            <el-option label="初中" value="初中" />
            <el-option label="高中" value="高中" />
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="博士" value="博士" />
            <el-option label="硕士" value="硕士" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号码" prop="id_number">
          <el-input v-model="form.id_number" />
        </el-form-item>
        <el-form-item label="毕业院校">
          <el-input v-model="form.school" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="form.major" />
        </el-form-item>
        <el-form-item label="入会推荐人" prop="recommender">
          <el-input v-model="form.recommender" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <ws-upload-single-img v-model="form['avatar']" :path="form['avatar']?(form['avatar'].indexOf('https://')<0?ImageUrl+form['avatar']:form['avatar']):''"/>
        </el-form-item>
        <el-form-item label="企业名称" prop="enterprise_name">
          <el-input v-model="form.enterprise_name"/>
        </el-form-item>
        <el-form-item label="工作职务" prop="position">
          <el-input v-model="form.position"/>
        </el-form-item>
        <el-form-item label="企业性质" prop="nature">
          <el-select v-model="form.nature" placeholder="请选择企业性质">
            <el-option label="国有企业" value="国有企业" />
            <el-option label="集体企业" value="集体企业" />
            <el-option label="私营企业" value="私营企业" />
            <el-option label="个体工商户" value="个体工商户" />
            <el-option label="合伙企业" value="合伙企业" />
            <el-option label="联营企业" value="联营企业" />
            <el-option label="股份合作制企业" value="股份合作制企业" />
            <el-option label="有限责任公司" value="有限责任公司" />
            <el-option label="股份有限公司" value="股份有限公司" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业地址">
          <el-select v-model="form['provinceCodeIdx']" placeholder="请选择省份" @change="provinceSelectChange">
            <el-option v-for="(item,index) in provinceList" :key="item.code" :label="item.name" :value="index"/>
          </el-select>
          <el-select v-model="form['cityCodeIdx']" placeholder="请选择市" @change="citySelectChange">
            <el-option v-for="(item,index) in cityList" :key="item.code" :label="item.name" :value="index"/>
          </el-select>
          <el-select v-if="areaList.length!=0" v-model="form['area']" placeholder="请选择区">
            <el-option v-for="item in areaList" :key="item.code" :label="item.name" :value="item.code+''"/>
          </el-select>
          <el-input v-model="form['address']" :rows="2" type="textarea" placeholder="详细地址"/>
        </el-form-item>
        <el-form-item label="是否高新科技企业">
          <el-select v-model="form.new_high" placeholder="请选择所属等级">
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-input v-model="form.industry"/>
        </el-form-item>
        <el-form-item label="主营业务" prop="industry">
          <el-input v-model="form.main_business"/>
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="form.zip_code"/>
        </el-form-item>
        <el-form-item label="企业专利">
          <el-input v-model="form.patent"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="QQ/微信号">
          <el-input v-model="form.wechat" />
        </el-form-item>
        <el-form-item label="E-mail" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="办公电话" prop="office_phone">
          <el-input v-model="form.office_phone" />
        </el-form-item>
        <el-form-item label="企业网址">
          <el-input v-model="form.website" />
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="form.fax" />
        </el-form-item>
        <el-form-item label="企业注册资金" prop="registered_capital">
          <el-input v-model="form.registered_capital" />
        </el-form-item>
        <el-form-item label="员工人数" prop="staff_number">
          <el-input v-model="form.staff_number" />
        </el-form-item>
        <el-form-item label="会员类型" prop="industry_type_id">
          <el-select v-model="form.industry_type_id" placeholder="请选择类型">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id+''" />
          </el-select>
        </el-form-item>
        <el-form-item label="上一年度主营业额" prop="turnover">
          <el-input v-model="form.turnover" />
        </el-form-item>
        <el-form-item label="上一年度主纳税额" prop="tax_amount">
          <el-input v-model="form.tax_amount" />
        </el-form-item>
        <el-form-item label="工作简介">
          <el-input v-model="form.job_brief" type="textarea" />
        </el-form-item>
        <el-form-item label="企业简介及发展情况" prop="company_profile">
          <el-input v-model="form.company_profile" type="textarea" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择所属等级">
            <el-option :value="2" label="正常" />
            <el-option :value="1" label="待审核" />
            <el-option :value="3" label="注销" />
          </el-select>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="submitForm('form')">{{ title==='编辑会员'?'保存':'立即创建' }}</el-button>
          <el-button type="primary" @click="$router.back(-1)">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '添加会员',
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',

      typeList: [], // 类型列表

      // 省市区列表
      provinceList: [],
      // 市列表
      cityList: [],
      // 地区列表
      areaList: [],

      form: {
        id: '',
        name: '',
        sex: '男',
        mobile: '',
        email: '',
        wechat: '',
        avatar: '',
        status: 2,
        birthday: '',
        native_place: '',
        nation: '',
        political_outlook: '',
        education: '',
        id_number: '',
        school: '',
        major: '',
        recommender: '',
        enterprise_name: '',
        position: '',
        nature: '',
        new_high: '',
        industry: '',
        zip_code: '',
        patent: '',
        office_phone: '',
        website: '',
        fax: '',
        registered_capital: '',
        staff_number: '',
        turnover: '',
        tax_amount: '',
        job_brief: '',
        company_profile: '',
        industry_type_id: '',
        // 省
        provinceCodeIdx: '',
        province: '',
        // 市
        cityCodeIdx: '',
        city: '',
        // 区
        area: '',
        address: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        mobile: [{ required: true, message: '请输入手机号码', trigger: 'change' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'change' }],
        wechat: [{ required: true, message: '请输入微信号或QQ号', trigger: 'change' }],
        avatar: [{ required: true, message: '请上传头像', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        industry_type_id: [{ required: true, message: '请选择状态', trigger: 'change' }],
        birthday: [{ required: true, message: '请选择出生年月日', trigger: 'change' }],
        native_place: [{ required: true, message: '请输入籍贯', trigger: 'change' }],
        nation: [{ required: true, message: '请输入民族', trigger: 'change' }],
        political_outlook: [{ required: true, message: '请选择政治面貌', trigger: 'change' }],
        education: [{ required: true, message: '请选择学历', trigger: 'change' }],
        id_number: [{ required: true, message: '请输入身份证号码', trigger: 'change' }],
        school: [{ required: true, message: '请输入学校', trigger: 'change' }],
        major: [{ required: true, message: '请输入专业', trigger: 'change' }],
        recommender: [{ required: true, message: '请输入入会推荐人', trigger: 'change' }],
        enterprise_name: [{ required: true, message: '请输入企业名称', trigger: 'change' }],
        position: [{ required: true, message: '请输入工作职务', trigger: 'change' }],
        nature: [{ required: true, message: '请选择企业性质', trigger: 'change' }],
        new_high: [{ required: true, message: '请选择是否高新企业', trigger: 'change' }],
        industry: [{ required: true, message: '请输入所属行业', trigger: 'change' }],
        office_phone: [{ required: true, message: '请输入办公电话', trigger: 'change' }],
        registered_capital: [{ required: true, message: '请输入企业注册资金', trigger: 'change' }],
        staff_number: [{ required: true, message: '请输入员工人数', trigger: 'change' }],
        turnover: [{ required: true, message: '请输入上一年度营业额', trigger: 'change' }],
        tax_amount: [{ required: true, message: '请输入上一年度纳税额', trigger: 'change' }],
        job_brief: [{ required: true, message: '请输入工作简介', trigger: 'change' }],
        company_profile: [{ required: true, message: '请输入企业简介', trigger: 'change' }]
      }
    }
  },
  watch: {
  },
  created() {
    this.getTypeList()
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.title = '编辑会员'
    }
  },
  methods: {
    /**
       *  获取信息
       *  接口:'member/detail/{id}'
       */
    getMemberInfo(id) {
      const url = 'vip/info/' + id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        const data = res.data || {}
        for (let i = 0; i < this.provinceList.length; i++) {
          if (this.provinceList[i].code === parseInt(data['province'])) {
            data['provinceCodeIdx'] = i
            this.cityList = this.provinceList[i]['children']
            for (let j = 0; j < this.provinceList[i]['children'].length; j++) {
              if (this.provinceList[i]['children'][j].code === parseInt(data['city'])) {
                data['cityCodeIdx'] = j
                this.areaList = this.provinceList[i]['children'][j]['children'] || []
              }
            }
          }
        }
        Object.assign(this.form, data)
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  获取类型列表
     */
    getTypeList() {
      const url = 'vip/typeList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.typeList = res.data
        this.loadProvinceList()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    // 加载省市区列表
    loadProvinceList() {
      const url = 'vip/regionList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.provinceList = res.data
        if (this.id) {
          this.getMemberInfo(this.id)
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    // 省份选择监听e:选择的index,params:出发地还是终点
    provinceSelectChange(e) {
      // console.log(e);
      this['cityList'] = this.provinceList[e]['children']
      this.form['province'] = this.provinceList[e]['code']
      this.form['cityCodeIdx'] = ''
      this.form['city'] = ''
      this.form['area'] = ''
    },
    // 市级选择监听e:选择的index,params:出发地还是终点
    citySelectChange(e) {
      // console.log(e);
      this['areaList'] = this['cityList'][e]['children'] || []
      this.form['city'] = this['cityList'][e]['code']
      this.form['area'] = ''
    },

    /**
       * 表单提交
       * 添加客户
       */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          const url = this.id ? ('vip/updateVip/' + this.id) : 'vip/addVip'
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }

  .el-checkbox {
    margin-right: 30px;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
